<template>
  <div class="app-container">
    <el-card>
      <!--
        CategorySelector是一个子组件，现在list.vue是父组件
        子与父之间的通讯
      -->
      <CategorySelector
        @changeCategory="changeCategory"
        :isShowList="isShowList"
      />
    </el-card>

    <el-card style="margin-top:20px">
      <!-- 列表页显示的前置条件是什么？ -->
      <div v-show="!isShowSpuForm && !isShowSkuForm">
        <el-button type="primary" icon="el-icon-plus" @click="showAddSpuForm"
          >添加SPU</el-button
        >
        <p />
        <el-table :data="spuList" border style="width:100%">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column prop="spuName" label="SPU名称"></el-table-column>
          <el-table-column prop="description" label="SPU描述"></el-table-column>
          <el-table-column label="操作" width="350" align="center">
            <template slot-scope="{ row, $index }">
              <HintButton
                type="success"
                icon="el-icon-plus"
                size="mini"
                title="添加SKU"
                @click="showAddSkuForm(row)"
              ></HintButton>
              <HintButton
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="修改SPU"
                @click="showUpdateSpuForm(row)"
              ></HintButton>
              <HintButton
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看SKU列表"
              ></HintButton>
              <el-popconfirm
                :title="`你确认删除${row.spuName}`"
                @onConfirm="deleteSpu(row)"
              >
                <HintButton
                  slot="reference"
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  title="删除SPU"
                ></HintButton>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
          style="text-align:center"
          @size-change="handleSizeChange"
          @current-change="getSpuList"
          :current-page="page"
          :page-sizes="[3, 5, 7]"
          :page-size="3"
          layout=" prev, pager, next, jumper,->,sizes,total"
          :total="total"
          background
          :pager-count="7"
        >
        </el-pagination>
      </div>

      <div>
        <SpuForm
          v-show="isShowSpuForm"
          ref="spu"
          :visible.sync="isShowSpuForm"
          @successBack="successBack"
          @cancelBack="cancelBack"
        />
      </div>
      <!-- 添加SKU页面 -->
      <div>
        <SkuForm v-show="isShowSkuForm" />
      </div>
    </el-card>
  </div>
</template>

<script>
import SpuForm from '@/views/product/components/SpuForm'
import SkuForm from '@/views/product/components/SkuForm'

export default {
  name: 'Spu',
  data() {
    return {
      category1Id: '',
      category2Id: '',
      category3Id: '',
      isShowList: true,
      spuList: [], // spu的列表是具有分页功能的，所以需要有分页的属性
      page: 1, // 当前页
      limit: 3, // 每页显示的条数
      total: 0, //总记录数
      // isShowSpuForm和isShowSkuForm会不会同时都为true或者同时都为false？
      isShowSpuForm: false, // 控制SpuForm是否显示
      isShowSkuForm: false // 控制SkuForm是否显示
    }
  },
  components: {
    SpuForm,
    SkuForm
  },
  methods: {
    // 分类的切换
    changeCategory({ categoryId, level }) {
      if (level === 1) {
        this.category1Id = categoryId

        // 一级被选中的时候，二、三级应该是列表清空的
        this.category2Id = ''
        this.category3Id = ''
        this.spuList = []
      } else if (level === 2) {
        this.category2Id = categoryId
        // 二级选中以后，三级应该清空
        this.category3Id = ''
        this.spuList = []
      } else {
        this.category3Id = categoryId

        // 只有在三级分类获取到以后，才能进行数据的请求操作
        this.getSpuList()
      }
    },
    handleSizeChange(size) {
      this.limit = size
      this.getSpuList()
    },
    // 获取Spu的列表
    async getSpuList(pager = 1) {
      // pager的设置是为了不与page进行变量名重复定义的冲突
      this.page = pager
      let { page, limit, category3Id } = this
      const result = await this.$API.spu.getList(page, limit, category3Id)
      if (result.code === 200) {
        this.spuList = result.data.records
        this.total = result.data.total
      }
    },
    // 点击显示添加SPU的表单内容
    showAddSpuForm() {
      this.isShowSpuForm = true

      this.$refs.spu.initAddSpuFormData(this.category3Id)
    },
    // 点击显示修改SPU的表单内容
    showUpdateSpuForm(row) {
      this.flag = row.id // 添加一个标识，在添加的时候这个flag标识是有数据的

      this.isShowSpuForm = true
      // 调用了子组件中的方法，修改的方法
      this.$refs.spu.initUpdateSpuFormData(row)
    },
    // 点击显示添加SKU的表单内容
    showAddSkuForm(row) {
      this.isShowSkuForm = true
    },

    successBack() {
      if (this.flag) {
        this.getSpuList(this.page)
      } else {
        // 添加回来的
        this.getSpuList()
      }

      // 清空标识
      this.flag = null
    },
    // 取消
    cancelBack() {
      this.flag = null
    },
    // 删除spu
    async deleteSpu(row) {
      try {
        await this.$API.spu.remove(row.id)

        // 1.提示
        this.$message.success('删除成功')
        // 2.列表的重新获取
        this.getSpuList(this.spuList.length > 1 ? this.page : this.page - 1)
      } catch (error) {
        this.$message.error('删除失败')
      }
    }
  }
}
</script>

<style></style>
